<template>
  <div id="user-info">
    <Header goback="true" headerTitle="账号信息"></Header>
    <!-- <div>jkkj</div> -->
    <!-- <Header goback="true" headerTitle="我的"></Header> -->
    <div class="info-centent">
      <div class="info-details">
        <div class="user-img details-all">
          <span class="details-imgTitle">头像</span>
          <img
            src="../../../../static/images/fenxiang.png"
            alt=""
            class="details-img"
          />
          <span class="iconfont icon-xiangyou1 info-right-all"></span>
        </div>
        <router-link class="user-name details-all" to="/user/info/updateUser">
          <span class="details-userTitle">用户名</span>
          <p class="details-user">15923648715</p>
          <span class="iconfont icon-xiangyou1 info-right-all"></span>
        </router-link>
        <router-link class="user-address details-all" to="/user/info/address">
          <span class="details-address">收货地址</span>
          <span class="iconfont icon-xiangyou1 info-right-all"></span>
        </router-link>
      </div>
      <section class="info-tel info-all">
        <p class="info-title-all">账号绑定</p>
        <div class="tel info-content-all">
          <div class="tel-left">
            <span class="iconfon icon-shouji tel-icon"></span>
            <span class="tel-name">手机</span>
          </div>
          <span class="iconfont icon-xiangyou1 tel-right info-right-all"></span>
        </div>
      </section>
      <section class="info-all">
        <p class="info-title-all">安全设置</p>
        <div class="info-pwd info-content-all">
          <span>登录密码</span>
          <p>修改</p>
          <span class="iconfont icon-xiangyou1 info-right-all"></span>
        </div>
      </section>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Header from "../../../components/header/header";
export default {
  data() {
    return {};
  },
  components: { Header },
};
</script>

<style lang="scss" scoped>
//引入公告模块
@import "../../../style/mixin";
//初始化 span 和 p 的统一字体大小和颜色
span {
  @include sc(0.6rem, black);
  font-weight: 500;
}
p {
  @include sc(0.6rem, #a69999);
  font-weight: 500;
}
//定位最外层标签的位置
#user-info {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 250;
  @include wh(100%, 100%);
  background: #f2f2f2;
}
//类似body主体部分,拉开距离头部的距离
.info-centent {
  padding-top: 1.94rem;
  @include wh(100%, 100%);
}
//用户信息主体
.details-all {
  display: block;
  @include wh(100%, 2rem);
  border-top: 0.05rem solid #dddddd;
  display: flex;
  justify-content: space-between;
  padding-left: 0.4rem;
  padding-right: 1.2rem;
  align-items: center;
  position: relative;
  background: white;
}
//用户信息  头像  用户名 收货地址 拉开一定距离
.info-details {
  width: 100%;
  margin-top: 0.4rem;
  border-bottom: 0.05rem solid #dddddd;
  .user-img {
    height: 3.1rem;
    .details-img {
      @include wh(1.5rem, 1.5rem);
    }
  }
}
//标题 账号绑定 修改密码
.info-title-all {
  @include wh(100%, 1.5rem);
  line-height: 1.5rem;
  padding-left: 0.4rem;
  @include sc(0.6rem, #666666);
}
//账号绑定，修改密码 主体,继承 用户主体的样式 ,布局结构和样式类似
.info-content-all {
  @extend .details-all;
  border-bottom: 0.05rem solid #dddddd;
}
.tel-icon {
  @include sc(1.2rem, $blue);
  vertical-align: middle;
}
.info-right-all {
  position: absolute;
  right: 0.35rem;
  @include ct;
  @include sc(0.7rem, #a69999);
}
</style>
